<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<title>noobSlide - mootools</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script type="text/javascript" src="/laboratory/js/gzip.php?js=mootools-1.2-core.js"></script>
	<script type="text/javascript" src="_class.noobSlide.packed.js"></script>
	<script type="text/javascript">
	window.addEvent('domready',function(){
		//SAMPLE 1 (auto, every 5 sec)
		var nS1 = new noobSlide({
			box: $('box1'),
			items: [0,1,2,3],
			size: 480,
			autoPlay: true
		});

		//SAMPLE 2 (transition: Bounce.easeOut)
		var nS2 = new noobSlide({
			box: $('box2'),
			items: [0,1,2,3,4,5,6,7],
			interval: 3000,
			fxOptions: {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut,
				wait: false
			},
			addButtons: {
				previous: $('prev1'),
				play: $('play1'),
				stop: $('stop1'),
				next: $('next1')
			}
		});

		//SAMPLE 3 (play, stop, playback)
		var nS3 = new noobSlide({
			box: $('box3'),
			items: [0,1,2,3,4,5,6,7],
			interval: 1000,
			startItem: 4,
			addButtons: {
				playback: $('playback3'),
				stop: $('stop3'),
				play: $('play3')
			}
		});

		//SAMPLE 4 (walk to item)
		var nS4 = new noobSlide({
			box: $('box4'),
			items: $$('#box4 div'),
			size: 480,
			handles: $$('#handles4 span'),
			onWalk: function(currentItem,currentHandle){
				$('info4').set('html',currentItem.getFirst().innerHTML);
				this.handles.removeClass('active');
				currentHandle.addClass('active');
			}
		});

		//SAMPLE 5 (mode: vertical, using "onWalk" )
		var info5 = $('info5').set('opacity',0.5);
		var sampleObjectItems =[
			{title:'Morbi elementum', autor:'Lorem', date:'5 Jun 2007', link:'http://www.link1.com'},
			{title:'Mollis leo', autor:'Ipsum', date:'6 Dic 2007', link:'http://www.link2.com'},
			{title:'Nunc adipiscing', autor:'Dolor', date:'9 Feb 2007', link:'http://www.link3.com'},
			{title:'Phasellus volutpat pharetra', autor:'Sit', date:'22 Jul 2007', link:'http://www.link4.com'},
			{title:'Sed sollicitudin diam', autor:'Amet', date:'30 Set 2007', link:'http://www.link5.com'},
			{title:'Ut quis magna vel', autor:'Consecteur', date:'5 Nov 2007', link:'http://www.link6.com'},
			{title:'Curabitur et ante in', autor:'Adipsim', date:'12 Mar 2007', link:'http://www.link7.com'},
			{title:'Aliquam commodo', autor:'Colom', date:'10 Abr 2007', link:'http://www.link8.com'}
		];
		var nS5 = new noobSlide({
			mode: 'vertical',
			box: $('box5'),
			size: 180,
			items: sampleObjectItems,
			addButtons: {
				previous: $('prev5'),
				play: $('play5'),
				stop: $('stop5'),
				next: $('next5')
			},
			onWalk: function(currentItem){
				info5.empty();
				new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
				new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info5);
			}
		});

		//SAMPLE 6 (on "mouseenter" walk)
		var info6 = $('box6').getNext().set('opacity',0.5);
		var nS6 = new noobSlide({
			mode: 'vertical',
			box: $('box6'),
			items: sampleObjectItems,
			size: 180,
			handles: $$('#handles6_1 div').extend($$('#handles6_2 div')),
			handle_event: 'mouseenter',
			addButtons: {
				previous: $('prev6'),
				play: $('play6'),
				stop: $('stop6'),
				playback: $('playback6'),
				next: $('next6')
			},
			button_event: 'click',
			fxOptions: {
				duration: 1000,
				transition: Fx.Transitions.Back.easeOut,
				wait: false
			},
			onWalk: function(currentItem,currentHandle){
				info6.empty();
				new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6);
				new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info6);
				this.handles.set('opacity',0.3);
				currentHandle.set('opacity',1);
			}
		});
		//walk to next item
		nS6.next();
		
		//SAMPLE 7
		var startItem = 3; //or   0   or any
		var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').set('opacity',0.8);
		var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
		var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7);
		var nS7 = new noobSlide({
			box: $('box7'),
			items: [0,1,2,3,4,5,6,7],
			handles: $$('#thumbs_handles7 span'),
			fxOptions: fxOptions7,
			onWalk: function(currentItem){
				thumbsFx.start(currentItem*60-568);
			},
			startItem: startItem
		});
		//walk to first with fx
		nS7.walk(0);

		//SAMPLE 8
		var handles8_more = $$('#handles8_more span');
		var nS8 = new noobSlide({
			box: $('box8'),
			items: $$('#box8 h3'),
			size: 480,
			handles: $$('#handles8 span'),
			addButtons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') },
			onWalk: function(currentItem,currentHandle){
				//style for handles
				$$(this.handles,handles8_more).removeClass('active');
				$$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
				//text for "previous" and "next" default buttons
				$('prev8').set('html','&lt;&lt; '+this.items[this.previousIndex].innerHTML);
				$('next8').set('html',this.items[this.nextIndex].innerHTML+' &gt;&gt;');
			}
		});
		//more "previous" and "next" buttons
		nS8.addActionButtons('previous',$$('#box8 .prev'));
		nS8.addActionButtons('next',$$('#box8 .next'));
		//more handle buttons
		nS8.addHandleButtons(handles8_more);
		//walk to item 3 witouth fx
		nS8.walk(3,false,true);

	});
	</script>
</head>
<body>
<div id="cont">

<h1>noobSlide - mootools</h1>

<div class="description">
	<p>noobSlide es una ligera "clase" escrita con la librería <a href="http://mootools.net" title="a super lightweight web2.0 javascript framework">mootools</a> con la que se puede construir "slides" desde simples hasta complejos, claro que para sacarle el máximo provecho necesitas aprender <a href="http://clientside.cnet.com/wiki/mootorial/" title="A Mootools Tutorial">cómo trabajar con mootools</a>.</p>
	<p>_class.noobSlide.packed.js (2.48kb)</p>
	<h4>Descargar:</h4>
	<p>
		- <a href="class.noobSlide.js_[mootools_1.2].zip">noobSlide (rev.03-11-10) para mootools 1.2</a> <br />
		- <a href="class.noobSlide.js.zip">noobSlide (rev.17-04-08) para mootools 1.11</a> <br />
		- <a href="CHANGELOG">changelog</a>
	</p>
	<h4>Relacionado:</h4>
	<p>
		- <a href="../viewer/">viewer</a> <br />
		- <a href="../" title="Mootools Plugins">mootools plugins</a>
	</p>
</div>

<!-- SAMPLE 1 -->
<h2>Sample 1</h2>
<div class="sample">
	<div class="mask1">
		<div id="box1">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
	</div>
</div>

<!-- SAMPLE 2 -->
<h2>Sample 2</h2>
<div class="sample">
	<div class="mask2">
		<div id="box2">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
	</div>
	<p class="buttons">
		<span id="prev1">&lt;&lt; Previous</span>
		<span id="play1">Play &gt;</span>
		<span id="stop1">Stop</span>
		<span id="next1">Next &gt;&gt;</span>
	</p>
</div>

<!-- SAMPLE 3 -->
<h2>Sample 3</h2>
<div class="sample">
	<div class="mask2">
		<div id="box3">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
	</div>
	<p class="buttons">
		<span id="playback3">&lt; Playback</span>
		<span id="stop3">Stop</span>
		<span id="play3">Play &gt;</span>
	</p>
</div>

<!-- SAMPLE 4 -->
<h2>Sample 4</h2>
<div class="sample">
	<div class="mask3">
		<div id="box4">

			<div>
				<h3>1. Lorem ipsum dolor sit amet</h3>
				<img src="img1.jpg" alt="Photo" />
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
			</div>

			<div>
				<h3>2. Nullam porttitor tortor et sem</h3>
				<img src="img2.jpg" alt="Photo" />
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p>
				<p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
			</div>

			<div>
				<h3>3. Aenean consectetuer nibh sedt</h3>
				<img src="img3.jpg" alt="Photo" />
				<ul>
					<li>Duis consequat laoreet libero.</li>
					<li>Nullam scelerisque porta arcu.</li>
					<li>Praesent ut tortor quis nunc vehicula interdum.</li>
					<li>Cras ultrices venenatis justo.</li>
					<li>Duis eu ligula at justo tempus varius.</li>
					<li>Vivamus mattis ante et arcu.</li>
					<li>Nulla eleifend dignissim neque.</li>
					<li>Donec ut elit vel nisi mollis volutpat.</li>
				</ul>
			</div>

			<div>
				<h3>4. Pellentesque ac dolor</h3>
				<img src="img4.jpg" alt="Photo" />
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
			</div>

			<div>
				<h3>5. Pellentesque ac dolor</h3>
				<img src="img5.jpg" alt="Photo" />
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
			</div>

			<div>
				<h3>6. Lorem ipsum dolor sit amet</h3>
				<img src="img6.jpg" alt="Photo" />
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus. Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
			</div>

			<div>
				<h3>7. Nullam porttitor tortor et sem</h3>
				<img src="img7.jpg" alt="Photo" />
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Nulla lobortis, leo elementum fringilla mollis, magna neque rhoncus lorem, vitae venenatis tellus felis vitae lacus.</p>
				<p>Nunc ante. Cras sodales. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi. Praesent at lacus. Aenean tincidunt. In hac habitasse platea dictumst.</p>
			</div>

			<div>
				<h3>8. Aenean consectetuer nibh sedt</h3>
				<img src="img8.jpg" alt="Photo" />
				<ul>
					<li>Duis consequat laoreet libero.</li>
					<li>Nullam scelerisque porta arcu.</li>
					<li>Praesent ut tortor quis nunc vehicula interdum.</li>
					<li>Cras ultrices venenatis justo.</li>
					<li>Duis eu ligula at justo tempus varius.</li>
					<li>Vivamus mattis ante et arcu.</li>
					<li>Nulla eleifend dignissim neque.</li>
					<li>Donec ut elit vel nisi mollis volutpat.</li>
				</ul>
			</div>

		</div>
	</div>
	<h4>Show: <span id="info4"></span></h4>
	<p class="buttons" id="handles4">
		<span>1. Uno</span>
		<span>2. Dos</span>
		<span>3. Tres</span>
		<span>4. Cuatro</span>
		<span>5. Cinco</span>
		<span>6. Seis</span>
		<span>7. Siete</span>
		<span>8. Ocho</span>
	</p>
</div>

<!-- SAMPLE 5 -->
<h2>Sample 5</h2>
<div class="sample">
	<div class="mask2">
		<div id="box5">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
		<div id="info5" class="info"></div>
	</div>
	<p class="buttons">
		<span id="prev5">&lt;&lt; Previous</span>
		<span id="play5">Play &gt;</span>
		<span id="stop5">Stop</span>
		<span id="next5">Next &gt;&gt;</span>
	</p>
</div>

<!-- SAMPLE 6 -->
<h2>Sample 6</h2>
<div class="sample sample6">
	<div class="thumbs" id="handles6_1">
		<div><img src="img1.jpg" alt="Photo Thumb" /></div>
		<div><img src="img2.jpg" alt="Photo Thumb" /></div>
		<div><img src="img3.jpg" alt="Photo Thumb" /></div>
		<div><img src="img4.jpg" alt="Photo Thumb" /></div>
	</div>
	<div class="mask6">
		<div id="box6">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
		<div class="info"></div>
	</div>
	<div class="thumbs" id="handles6_2">
		<div><img src="img5.jpg" alt="Photo Thumb" /></div>
		<div><img src="img6.jpg" alt="Photo Thumb" /></div>
		<div><img src="img7.jpg" alt="Photo Thumb" /></div>
		<div><img src="img8.jpg" alt="Photo Thumb" /></div>
	</div>
	<p class="buttons">
		<span id="prev6">&lt;&lt; Previous</span>
		<span id="playback6">&lt;Playback</span>
		<span id="stop6">Stop</span>
		<span id="play6">Play &gt;</span>
		<span id="next6">Next &gt;&gt;</span>
	</p>
</div>

<!-- SAMPLE 7 -->
<h2>Sample 7</h2>
<div class="sample">
	<div class="mask6">
		<div id="box7">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
	</div>

	<div id="thumbs7">
		<div class="thumbs">
			<div><img src="img1.jpg" alt="Photo Thumb" /></div>
			<div><img src="img2.jpg" alt="Photo Thumb" /></div>
			<div><img src="img3.jpg" alt="Photo Thumb" /></div>
			<div><img src="img4.jpg" alt="Photo Thumb" /></div>
			<div><img src="img5.jpg" alt="Photo Thumb" /></div>
			<div><img src="img6.jpg" alt="Photo Thumb" /></div>
			<div><img src="img7.jpg" alt="Photo Thumb" /></div>
			<div><img src="img8.jpg" alt="Photo Thumb" /></div>
		</div>

		<div id="thumbs_mask7"></div>

		<p id="thumbs_handles7">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</p>
	</div>
</div>

<!-- SAMPLE 8 -->
<h2>Sample 8</h2>
<div class="sample sample8">
	<p class="buttons" id="handles8">
		<span>Pane 1</span>
		<span>Pane 2</span>
		<span>Pane 3</span>
		<span>Pane 4</span>
	</p>

	<div class="mask1">
		<div id="box8">
			<div>
				<p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
				<h3>1. Lorem ipsum dolor sit amet</h3>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
			</div>
			<div>
				<p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
				<h3>2. Quisque aliquet accumsan</h3>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem. Quisque augue enim, rutrum quis, dignissim quis, convallis molestie, nisi.</p>
			</div>
			<div>
				<p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
				<h3>3. Duis consequat laoreet</h3>
				<ul>
					<li>Duis consequat laoreet libero.</li>
					<li>Nullam scelerisque porta arcu.</li>
					<li>Praesent ut tortor quis nunc vehicula interdum.</li>
					<li>Cras ultrices venenatis justo.</li>
				</ul>
			</div>
			<div>
				<p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
				<h3>4. Aenean consectetuer</h3>
				<p>Quisque aliquet accumsan lectus. Nullam porttitor tortor et sem.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque ac dolor. Aenean consectetuer nibh sed ante pretium egestas. Fusce hendrerit. Duis ultrices tristique diam.</p>
			</div>
		</div>
	</div>

	<p class="buttons">
		<span id="prev8">&lt;&lt; Previous</span> | <span id="next8">Next &gt;&gt;</span>
	</p>

	<p class="buttons">
		<span id="playback8">&lt;Playback</span>
		<span id="stop8">Stop</span>
		<span id="play8">Play &gt;</span>
	</p>

	<p class="buttons" id="handles8_more">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
	</p>

</div>

<div class="links">
	<a href="class.noobSlide.js_[mootools_1.2].zip">download noobSlide (rev.03-11-10) for mootools 1.2</a> <br />
	<a href="class.noobSlide.js.zip">download noobSlide (rev.17-04-08) for mootools 1.11</a>
</div>

</div>
</body>
</html>  -E